<template>
  <div class="index-Container">
    <div class="custom-navbar">
      <CustomNavbar :activeNav="activeNav" @update-nav="changnav" />
    </div>
    <div class="content-container">
      <!-- 虚拟瀑布流内容区域 -->
      <div class="virtual-waterfall-container">
        <FsVirtualWaterFall
          :request="loadPosts"
          :gap="1"
          :column="2"
          :request-size="8"
        >
          <!-- <template v-slot:item="{ item }">
            <img class="test-item" :src="item.src" />
          </template> -->
        </FsVirtualWaterFall>
      </div>
    </div>
  </div>
</template>

<script>
import CustomNavbar from '@/components/index/CustomNavbar.vue'
import FsVirtualWaterFall from '@/components/index/FsVirtualWaterFall/FsVirtualWaterFall.vue'
import { getAllPosts,findPaginated } from '../../api' 
export default {
  name: 'IndexContainer',
  components: {
    CustomNavbar,
    FsVirtualWaterFall
  },
  data() {
    return {
      activeNav: '1'
    }
  },
  mounted(){
    //  this.loadPosts()
  },
  methods: {
    changnav(nav) {
      this.activeNav = nav
    },
    

    // 虚拟瀑布流请求函数
    // async req(page, pageSize) {
    //   const rep = await fetch(
    //     `https://www.vilipix.com/api/v1/picture/public?limit=${pageSize}&sort=hot&offset=${--page *
    //       pageSize}`
    //   )
    //   let {
    //     data: { rows, count }
    //   } = await rep.json()
    //   console.log('测试的数据')
    //   console.log(rows)
    //   console.log(count)
    //   rows = rows.map((item) => ({
    //     id: item.picture_id,
    //     width: item.width,
    //     height: item.height,
    //     src: item.regular_url + '?x-oss-process=image/resize,w_240/format,jpg'
    //   }))
    //   return {
    //     total: count,
    //     list: rows
    //   }
    // },
    async loadPosts(page,pageSize){

       try{
 const res=await findPaginated(page,pageSize)


  return res.data
       }catch(err){
        console.error('获取帖子失败',err)
       }
    }
  }
}
</script>

<style scoped lang="scss">
.index-Container {
  background-color: rgb(238, 247, 253);
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;

  .custom-navbar {
    flex: 2;
  }

  .content-container {
    flex: 7.5;
    overflow: auto;
    
    .virtual-waterfall-container {
      width: 100%;
      height: 100%;
    }

    .test-item {
      width: 100%;
      display: block;
    }
  }
}
</style>
